<template>
  <div class="demo2">
  	<!--上传根组件，既上传器-->
		<uploader
			:options="options"
			:autoStart="true"
			@file-progress='onFileProgress'
			@file-success='onFileSuccess'
			@file-error='onFileError'
			@complete="onComplete"
			class="uploader-example">
			<!--不支持 HTML5 File API 的时候会显示-->
	    <uploader-unsupport></uploader-unsupport>
	    <!--拖拽上传区-->
	    <uploader-drop>
        <uploader-btn :attrs="attrs">
          <i class="el-icon-upload"></i>
          <p>将文件拖到此处，或<span style="color: #409eff;">点击上传</span></p>
        </uploader-btn>
	    </uploader-drop>
	    <!--上传列表-->
	    <uploader-list></uploader-list>
	  </uploader>
  </div>
</template>

<script>

export default{
  name: 'uploadBreakpoint',
  props: {
    init: {  //初始配置值
      type: Object,
      default: {}
    },
  },
  data(){
    return{
			options: { //配置参数
        target: this.init.url, //URL，上传地址
        testChunks: false, //是否测试是服务器已存在
        testMethod: 'POST', //测试的时候使用的 HTTP 方法
        uploadMethod: 'POST', //真正上传的时候使用的 HTTP 方法
        chunkSize: this.init.chunkSize*1024*1024, //分片大小
        forceChunkSize: true, //是否强制所有的块都是小于等于分片大小
        simultaneousUploads: 1, //并发同时上传数--只能为1，不能修改；
        maxChunkRetries: 3, //上传失败最大重试数
        allowDuplicateUploads: true, //是否允许再次上传
        query: { //携带参数
	      	userId: this.init.userId + new Date().getTime(), //标识，文件唯一标志，可以判断由那个用户上传
	      	bucketType:this.init.bucketType, //桶的类型（public：公有，private: 私有）
	      },
      },
      attrs: { //支持格式
      	accept: this.init.accept
      },
    }
  },
  methods: {
  	//文件上传过程中,参数分别为：1、成功上传文件对象；2、当前文件对象；3、响应实例
    onFileProgress (rootFile, file, chunk){

    },
    //上传成功回调，参数分别为：1、成功上传文件对象；2、当前文件对象；3、服务器响应；4、响应实例
    onFileSuccess (rootFile, file, message, chunk){
    	// console.log(file, message ,"返回得数据")
      let downloadAddress = JSON.parse(message); //文件下载地址,保存使用
      this.$emit('getUrl',file, downloadAddress);  // 向父页传递成功值，执行@getUrl="getUrl"
    },
    //上传出错
    onFileError (rootFile, file, message, chunk){
      this.$message.error('上传失败，请重试');
      this.$emit('errorHandler')
    },
    //上传完毕
    onComplete (){
//  	console.log('完毕')
    },

  }
}
</script>

<style scoped="scoped" lang="less">
.uploader-example {
	background-color: #fff;
  border-radius: 6px;
  box-sizing: border-box;
  width: 380px;
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  outline: none;
}
.uploader-drop{
	background: #fff;
	padding: 0;
	border-radius: 6px;
	overflow: hidden;
}
.uploader-example .uploader-drop:hover{
	background: #fff;
	border: 1px dashed #409eff;
}
.uploader-drop p{
	color: #606266;
  font-size: 14px;
  text-align: center;
}
.uploader-drop i{
	font-size: 67px;
  color: #c0c4cc;
  // margin: 40px 0 16px;
  line-height: 50px;
}
.uploader-example .uploader-btn {
  margin-right: 4px;
  border: none;
  padding: 0;
  margin: 0;
  color: #606266;
  font-size: 14px;
  text-align: center;
  position: static;
  width: 100%;
  // height: 180px;
}
.uploader-example .uploader-list {
  max-height: 440px;
  overflow: auto;
  overflow-x: hidden;
  overflow-y: auto;
  color: #606266;
  font-size: 12px;
}
</style>
